<template>
    <el-dialog 
        v-if="visable"
        v-model="visable"
        :title="dialog.title ? dialog.title : '暂无标题'"
       
       ref="comDialog"
    >
    <!-- :title="dialog.title ? dialog.title : '暂无标题' " 
        :width="dialog.width ? dialog.width : '20%' "
        :top="props.dialog.top ? props.dialog.top : '15vh'" -->
    <!-- :fullscreen="props.dialog.fullscreen ? props.dialog.fullscreen : false"
        :modal="props.dialog.modal ? props.dialog.modal : true"
        :append-to-body="props.dialog.appendBody ? props.dialog.appendBody : true "
        :lock-scroll="props.dialog.localScroll ? props.dialog.localScroll : false"
       :open-delay="props.dialog.openDelay ? props.dialog.openDelay : 0"
       :close-delay="props.dialog.closeDelay ? props.dialog.closeDelay : 0"
       :close-on-click-modal="props.dialog.closeOnModal ? props.dialog.closeOnModal : false"
       :close-on-press-escape="props.dialog.closeOnEscape ? props.dialog.closeOnEscape : true"
       :show-close="props.dialog.showClose ? props.dialog.showClose : true"
       :before-close="props.dialog.beforeClose ? props.dialog.beforeClose() : null"
       :draggable="props.dialog.draggable ? props.dialog.draggable :false"
       :center="props.dialog.center ? props.dialog.center :false"
       :destroy-on-close="props.dialog.destroyOnClose ? props.dialog.destroyOnClose:false" -->
       <div slot="title" v-if="props.dialog.titleSlot" v-html="props.dialog.titleSlot">   
       </div>
        <div slot="title" v-if="props.dialog.addTitleText">
            {{props.dialog.title}}
            <span :style="props.dialog.addTitleTextStyle?props.dialog.addTitleTextStyle:''" >{{props.dialog.addTitleText}}</span>
        </div>
         <slot name="header"></slot>
         <slot></slot>
        <div slot="footer" class="dialog-footer" 
                style="text-align:right;"
                v-if="props.dialog.btns && props.dialog.btns.length > 0">
            <el-button v-for="(btn,index) in props.dialog.btns"  
                :key="index"
                :type="btn.type ? btn.type : 'primary'" 
                :icon=" btn.icon ? btn.icon : '' " 
                :disabled="btn.disabled ? btn.disabled : false"
                @click="btn.closed ? visable=btn.closed : visable=false ,btn.click ? btn.click() : null"
                :size="btn.size ? btn.size : 'default'"
                >{{btn.name}}</el-button>
        </div>
    </el-dialog>
</template>
<script setup name="ComDialog">
const props = defineProps({
    visable:{
        type:Boolean,
        default:false,
    },
    dialog:{
        default:()=>{},
        type:Object,
    }
})
// function change(e){
//     console.log("change",e)
// } 
let visable = ref(false);
let dialog = reactive({})
// let dialog = computed(() => {
//     return props.dialog
// })
watch(() => props.visable, value => console.log("watch-visable",value))
// let {dialog}=toRefs(props)
// visable=true
// visable=props.visable;
console.log("props.visable",props.dialog,props.visable)
// watch("visable", (value) => {
//     console.log("watch-visable",value)
//     // visable=value;
//     // props.visable = value ;
// })
// 显示弹框
function show(row,visableOrHidden) {
  console.log("props.visable1",row,visableOrHidden)
  visable.value = visableOrHidden;
  dialog=row
  // let {dialog}=toRefs(props)
  console.log("props.visable2",props.dialog,props.visable,dialog)
}
defineExpose({
  show
});
</script>
<style lang="scss" scoped>
.el-select{
    width:100%;
    text-align:center;
}
.dialog{
  >>> .el-dialog__body{
    padding: 0 20px 20px;
  }
  .dialog-footer{
    text-align: right;
    margin-top: 20px;
  }
}
</style>






















